<template>
<div class="hello">

    <div class="m-layout-table">

        <div class="m-layout-table-content">
            <el-table :data="filterdTableData" border style="width: 100%">
              
                <el-table-column prop="table_name" label="表名">
                </el-table-column>
                <el-table-column prop="table_comment" label="表备注">
                </el-table-column>
                <el-table-column prop="table_rows" label="表总行数">
                </el-table-column>
                <el-table-column fixed="right" label="操作" width="100">
                    <template slot-scope="scope">
                        <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

    </div>

</div>
</template>

<script>
import { getTableList } from "@/service/db.js";

export default {
  name: "DbList",
  data() {
    return {
      tableData: [],
      dbList: [
        {
          table_schema: "community"
        }
      ],
      filterForm: {
        table_schema: ""
      }
    };
  },
  computed: {
    filterdTableData() {
      var that = this;
      var filter = {};
      for (var key in that.filterForm) {
        if (that.filterForm[key] != "") {
          filter[key] = that.filterForm[key];
        }
      }
      console.log(filter, "=======filter=====");
      return that._.where(that.tableData, filter);
    }
  },
  created() {
    var that = this;
    getTableList().then(res => {
      that.tableData = res.data;
      console.log(res, "=========dbList========");
    });
  },
  methods: {
    handleClick(row) {
      this.gotoPage("TableColumList", {
        table_name: row.table_name
      });
    },
    gotoPage(toPath, query) {
      query = query || {};
      this.$router.push({
        //你需要接受路由的参数再跳转
        path: toPath,
        query: query
      });
      return false;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->

<style scoped>
</style>
